<template>
	<view id="myMachine" class="wrap s-flex-c-s-s">
		<!-- tabs -->
		<me-tabs class="dataBar top-Tabs" v-model="productWorkType" :tabs="oa_product_work_type"
			@change="typeChange"></me-tabs>
		<view class="flex1 list">
			<uni-collapse accordion @change="change">
				<view v-for="(item,index) in list" :key="index">
					<uni-collapse-item :title="item.abbreviation" :thumb="item.cpCover?item.cpCover:'/static/logo.png'">
						<view class="content" v-for="(pr,pi) in item.data" :key="pi" @click="getDetail(pr)">
							<image :src="pr.coverList?pr.coverList:'/static/logo.png'" class="imgs"></image>


							<text class="text">{{pr.abbreviation}}</text>
							<text class="icon"><i class="iconfont icon-right"></i></text>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				productWorkType: 0,
				oa_product_work_type: [],
				list: []
			}
		},
		onLoad() {
			this.getDictData()
			this.getProductList()
		},
		methods: {
			typeChange(e) {
				this.list = []
				this.getProductList()
			},
			getDictData() {
				this.httpClient.post('system/manageApp/index/getDictData', {
					dictType: 'oa_product_work_type'
				}).then(res => {
					let statusList = []
					res.data.forEach((v, i) => {
						statusList.push({
							id: v.dictValue,
							name: v.dictLabel
						})
					})
					this.oa_product_work_type = statusList
				})
			},
			getProductList() {
				this.httpClient.post('stock/manageApp/product/getProductList', {
					productWorkType: (this.productWorkType+1)
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})
			},
			getDetail(e) {
				uni.navigateTo({
					url: 'productDetail?id=' + e.id + '&name=' + e.abbreviation
				})
			},
			change(e) {
				console.info(e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.searchHasTab {
		/* #ifdef H5 */
		padding-bottom: 100rpx;
		/* #endif */
	}

	/deep/ .uni-collapse-item__title-box {
		height: 60px;
		line-height: 60px;
		font-size: 32rpx;
	}

	/deep/ .uni-collapse-item__title.uni-collapse-item-border[data-v-41027c34] {
		border-bottom: 5px solid #ebeef5;
	}

	#myMachine {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		/* #endif */
		/* #ifdef APP */
		height: 100vh;
		/* #endif */
		overflow: hidden;

		.list {
			overflow-y: scroll;
			padding-bottom: 200rpx;
			box-sizing: border-box;
		}

		/deep/ .uni-collapse-item__title-img {
			width: 88rpx;
			height: 88rpx;
		}

		.content {
			padding: 20rpx 20rpx 20rpx 80rpx;
			border-top: 1rpx dashed #eee;
			color: #888;
			display: flex;
			align-self: center;

			.imgs {
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				flex: 1;
				line-height: 50rpx;
				margin-left: 20rpx;
			}

			.icon {
				width: 40rpx;

				i.iconfont {
					font-sizse: 24rpx;
					color: #CCC;
				}
			}
		}
	}
</style>